<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>金天国际</title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

  <!-- <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/sm-extend.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/swiper.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/animate.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script>
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/common.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/css/Home/home.css"> -->

  <link rel="stylesheet" href="../../../css/sm.min.css">
  <link rel="stylesheet" href="../../../css/sm-extend.min.css">
  <!-- <link rel="stylesheet" href="../../css/swiper.min.css"> -->
  <!-- <link rel="stylesheet" href="../../css/animate.css"> -->
  <link rel="stylesheet" href="../../../css/common.css">
  <script type="text/javascript" src="../../../common/common.js"></script>
  <!-- <link rel="stylesheet" href="../../css/Home/home.css"> -->
  <!-- <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/common/common.js"></script> -->
  <style>
    .pagebox{
      padding-top: 2.3rem;
      background-color: white;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
    }
    .series{
      font-size: 12px;
      border-right: solid 1px black;
      /* width: max-content; */
      width: 4.5rem;
      padding: 0 0.3rem 0 0;
    }
    .choose{
      width: calc(100% - 4.5rem);

    }
    .seriesSpan{
      padding: 0.5rem 0;
      width: 100%;
      text-align: center;
    }
    .chooseaddress{
      display: flex;
      justify-content: space-around;
      border-bottom: 1px black solid;
    }
    .choosecontent{
      border: solid 1px red;
      width: 100%;
      height: 450px;
      overflow: auto;
    }
    .choosecontent ul{
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
    }
    .choosecontent ul li{
      list-style-type: none;
      width: 50%;
    }
    .choosecontent ul li img{
      width: 100%;
    }
    .price{
      display: flex;
      justify-content: space-between;
    }
    .firstwall{
      margin: 0.2rem;
      border: solid 1px black;
    }

  </style>
  
</head>

<body>
  <div class="page-group">
    <div class="page">
      <!-- 标题栏 -->
      <header class="bar bar-nav">
        <button class="button button-link button-nav pull-left">
          <span class="icon icon-left"></span>
          返回
        </button>
        <button class="button button-link button-nav pull-right">
          <!-- 下一步 -->
          <span class="icon icon-right"></span>
        </button>
        <!-- <h1 class="title">标题</h1> -->
      </header>

      <!-- 这里是页面内容区 -->
      <div class="pagebox">
        <div class="series">
          <div class="seriesSpan">特惠</div>
          <hr>
          <div class="seriesSpan">生态保养系列</div>
          <hr>
          <div class="seriesSpan">本源养生系列</div>
          <hr>
          <div class="seriesSpan">洗浴养生系列</div>
          <hr>
          <div class="seriesSpan">专项护理系列</div>
          <hr>
        </div> 
        <div class="choose">
          <div class="chooseaddress">
            <div>综合<span class="icon icon-down"></span></div>
            <div>最新<span class="icon icon-down"></span></div>
            <div>销量<span class="icon icon-down"></span></div>
            <select>
                <option value ="volvo">Volvo</option>
                <option value ="saab">Saab</option>
                <option value="opel">Opel</option>
                <option value="audi">Audi</option>
            </select>

          </div>
          <div class="choosecontent">
              <ul>
                  <li>
                      
                    <div class="firstwall">
                      <div>
                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
                      </div>
                      <div>
                        商品名城
                      </div>
                      <div class="price">
                        <span>￥168</span>
                        <span class="icon icon-cart"></span>
                      </div>
                    </div>
                  </li>
                  <li>
                      <div class="firstwall">
                        <div>
                          <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
                        </div>
                        <div>
                          商品名城
                        </div>
                        <div class="price">
                          <span>￥168</span>
                          <span class="icon icon-cart"></span>
                        </div>
                      </div>
                    </li>
                    <li>
                        <div class="firstwall">
                          <div>
                            <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
                          </div>
                          <div>
                            商品名城
                          </div>
                          <div class="price">
                            <span>￥168</span>
                            <span class="icon icon-cart"></span>
                          </div>
                        </div>
                      </li>
                      <li>
                          <div class="firstwall">
                            <div>
                              <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
                            </div>
                            <div>
                              商品名城
                            </div>
                            <div class="price">
                              <span>￥168</span>
                              <span class="icon icon-cart"></span>
                            </div>
                          </div>
                        </li>
                        <li>
                            <div class="firstwall">
                              <div>
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
                              </div>
                              <div>
                                商品名城
                              </div>
                              <div class="price">
                                <span>￥168</span>
                                <span class="icon icon-cart"></span>
                              </div>
                            </div>
                          </li>
              </ul>
          </div>

        </div>

      </div>
      
      <div class="top top_fixed">
        <a id="tops" href="#">回顶部</a>
      </div>
    </div>
  </div>
  <!-- ! 固定的js引用，所有的jQuery 要用 $$ 表示 -->
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">
    var $$ = jQuery.noConflict();
  </script>
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/zepto/zepto.min.js"
    charset="utf-8"></script>
  <script type="text/javascript" src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/sm.min.js"
    charset="utf-8"></script>
  <script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/swiper/swiper.min.js"></script>
  <script src="https://gitee.com/huaflower/JinTianGuoJiCommonFile/raw/master/js/Home/home.js"></script>
  

<!-- 
  <script type="text/javascript" src="../../js/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">
    var $$ = jQuery.noConflict();
  </script>
  <script type="text/javascript" src="../../zepto/zepto.min.js"
    charset="utf-8"></script>
  <script type="text/javascript" src="../../js/sm.min.js"
    charset="utf-8"></script>
  <script src="../../js/swiper/swiper.min.js"></script>
  <script src="../../js/Home/home.js"></script> -->


  <script type="text/javascript">
    //放函数区域
  
    $$('#tops').on('click', e => {
      e.preventDefault()
      $$('.choosecontent').animate({
      scrollTop: 0
      },
      500
      )
    });
    $$('.choosecontent').scroll(function () {
      var contentTop = $$('.choosecontent').scrollTop()
      console.log(contentTop)
      if (contentTop > 100) {
        $$('.top.top_fixed').css('display', 'block')
      } else {
        $$('.top.top_fixed').css('display', 'none')
      }
    })
  
    
    $(function(){
      $.init();
    });
  </script>
</body>

</html>